<template>
	<view>
		<!-- 轮播 -->
		<Banner :banner='banner'></Banner>
		<!-- 品牌信息 -->
		<view class="info">
			<view class="ele" v-for="(item,index) in policyDescList" :key='index'>
				<image :src="item.icon" mode="" class="icon"></image>
                 <text class="text">{{item.desc}}</text>
			</view>
		</view>
		<!-- 产品分类-菜单 -->
		<view class="menu">
			<view class="item" v-for="item in navList" :key='item.L1Id'>
				<navigator :url="'/pages/catePage/catePage?url='+item.schemeUrl">
					<image :src="item.picUrl" class="img" mode=""></image>
					<view :style="{color:'#'+item.textColor}">{{item.text}}</view>
				</navigator>
			</view>
		</view>
		<!-- 好物列表推荐 -->
		<view class="list" v-for="item in goodsList" :key="item.titlePicUrl">
			<image :src="item.titlePicUrl" class="imgInfo" mode=""></image>
			<scroll-view scroll-x class="goodsList">
				<view class="goodsEle" v-for='ele in item.itemList' :key='ele.id'>
						<image :src="ele.listPicUrl" class="descImg" mode=""></image>
						<view class="goodsInfo">
							{{ele.name}}
						</view>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import base from "@/utils/base.js"
	import request from "@/utils/request.js"
	import {mapState} from "vuex"
	export default {
		name:"Recommend",
		props:['policyDescList','goodsList'],
		data() {
			return {
				banner:[],
			};
		},
		computed:{
			...mapState('menu',['navList'])
		},
		created() {
			this.getBanner()
		},
		methods:{
			async getBanner(){
				let res = await request(base.indexBanner)
				console.log('轮播',res);
				this.banner = res.result;
			}
		}
	}
</script>

<style lang="scss" scoped>
.info{
	display: flex;
	align-items: center;
	padding: 0 10rpx;
	.ele{
		flex:1;
		position: relative;
			line-height: 46rpx;
		.icon{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top:4rpx;
		// vertical-align: middle;
	}
		.text{
			padding-left:40rpx ;
		}
	}
	
}
//分类导航
.menu{
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;
	.item{
		width: 20%;
		text-align: center;
		margin-bottom: 20rpx;
		.img{
			width: 100rpx;
			height: 100rpx;
		}
	}
}
//好物列表
.list{
	margin-bottom: 20rpx;
	.imgInfo{
		height: 375rpx;
		width: 100%;
	}
	.goodsList{
		white-space: nowrap;
		.goodsEle{
			display: inline-block;
			margin: 10rpx;
			width: 200rpx;
		}
		.goodsInfo{
			width: 200rpx;
			font-size: 30rpx;
			color: #666;
			white-space: normal;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			word-break: break-all;
		}
	}
	.descImg{
		background-color: #f5f5f5;
		width: 200rpx;
		height: 200rpx;
	}
}
</style>